//绘制类 临时
function    CanvasGD (canvas) {

    this._dom               = canvas;
    this._context           = canvas.getContext('2d');
    this._gridSizeWidth     = 0;
    this._gridSizeHeight    = 0;
}

/**
 * 根据矩阵填充所有格子
 *
 * @param   Array   matrix  矩阵
 */
CanvasGD.prototype.fillGrid = function (matrix) {

    this._gridSizeWidth         = this._dom.clientHeight / matrix.length;
    this._gridSizeHeight        = this._dom.clientWidth / matrix[0].length;
    this._context.save();
    this._context.font          = '10px sans-serif';
    this._context.textAlign     = 'left';
    this._context.textBaseline  = 'middle';
    this._context.strokeStyle   = 'black';

    for (var offsetRow = 0; offsetRow < matrix.length; offsetRow ++) {

        for (var offsetCell = 0; offsetCell < matrix[offsetRow].length; offsetCell ++) {

            this.fillCell({
                'x'     : offsetCell,
                'y'     : offsetRow,
                'style' : (0 == matrix[offsetRow][offsetCell]   ? 'white'   : 'gray')
            });
        }
    }
};

/**
 * 根据坐标获取该坐标所在的格子
 *
 * @param   Object  options 参数
 * @return  Object          格子坐标
 */
CanvasGD.prototype.getCellByCoordinate  = function (options) {

    return  {
        'x' : Math.floor(options.x / this._gridSizeWidth),
        'y' : Math.floor(options.y / this._gridSizeHeight)
    }
}

CanvasGD.prototype.fillCell = function (options) {

    this._context.beginPath();
    this._context.rect(
        options.x * this._gridSizeWidth,
        options.y * this._gridSizeHeight,
        this._gridSizeWidth,
        this._gridSizeHeight
    );
    this._context.stroke();
    this._context.fillStyle = options.style;
    this._context.fill();
    this._context.closePath();
}

/**
 * 显示格子内的动画 目前只支持颜色变化
 *
 * @param   Object      optionsA    从这个样式开始动画
 * @param   Object      optionsB    到这个样式结束动画
 * @param   Number      fps         帧频
 * @param   Number      delay       动画时间
 * @param   Function    callback    动画执行完毕时的回调函数
 */
CanvasGD.prototype.animateCell  = function (optionsA, optionsB, fps, delay, callback) {

    this._context.fillStyle = optionsB.style;
    var goalStyle       = {
        'R' : parseInt(this._context.fillStyle.substr(1,2), 16),
        'G' : parseInt(this._context.fillStyle.substr(3,2), 16),
        'B' : parseInt(this._context.fillStyle.substr(5,2), 16)
    };
    this._context.fillStyle = optionsA.style;
    var startStyle      = {
        'R' : parseInt(this._context.fillStyle.substr(1,2), 16),
        'G' : parseInt(this._context.fillStyle.substr(3,2), 16),
        'B' : parseInt(this._context.fillStyle.substr(5,2), 16)
    };
    this.fillCell(optionsA);
    var delayFrame      = Math.ceil(1000 / fps);
    var me              = this;
    var frameCount      = Math.ceil((delay * 1000) / delayFrame);
    var currentStyle    = startStyle;
    var currentCount    = 0;
    var deltaStyle      = {
        'R' : Math.floor((goalStyle.R - startStyle.R) / frameCount),
        'G' : Math.floor((goalStyle.G - startStyle.G) / frameCount),
        'B' : Math.floor((goalStyle.B - startStyle.B) / frameCount)
    };
    var handler         = window.setInterval(function () {

        currentStyle    = {
            'R' : currentStyle.R + deltaStyle.R,
            'G' : currentStyle.G + deltaStyle.G,
            'B' : currentStyle.B + deltaStyle.B
        };
        me.fillCell({
            'x'     : optionsA.x,
            'y'     : optionsA.y,
            'style' : 'rgba(' + currentStyle.R + ',' + currentStyle.G + ',' + currentStyle.B + ',1)'
        });

        if (currentCount >= frameCount) {

            if (null != callback) {

                callback();
            }
            window.clearInterval(handler);
            me.fillCell(optionsB);

            return  ;
        }
        currentCount    ++;
    }, delayFrame);
}

/**
 * 显示路径的动画 目前只支持颜色变化
 *
 * @param   Array       path        路径
 * @param   string      lastStyle   最后一格的颜色
 * @param   Function    callback    动画执行完毕时的回调函数
 */
CanvasGD.prototype.animatePath  = function (path, lastStyle, callback) {

    var handlers        = [];
    var currentOffset   = 0;

    for (var offset = 0;offset < path.length;offset ++) {

        var me              = this;
        handlers[offset]    = window.setTimeout(function () {

            var node            = path[currentOffset];
            var optionsBefore   = {
                'x'     : node.x,
                'y'     : node.y,
                'style' : 'green'
            };
            var optionsAfter    = {
                'x'     : node.x,
                'y'     : node.y,
                'style' : (path.length - 1) == currentOffset    ? lastStyle : 'white'
            };
            var callbackAnime   = (path.length - 1) == currentOffset    ? callback  : null;
            me.animateCell(optionsBefore, optionsAfter, 50, 0.5, callbackAnime);
            window.clearTimeout(handlers[currentOffset]);
            currentOffset ++;
        }, 10 * offset);
    }
}

